<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 模板的写法2  直接在模板容器中写，但是在vue 实例中不能写 template 属性  会替换模板 -->
        <h1>我的名字是:{{name}}</h1>
        <span>我的年龄是：{{age+1}}</span>
        <span>性别是：{{sex}}</span>

    </div>
    <script>
        const vm = new Vue({
            el: "#app",   //指定挂载的容器  可以是一个选择器 （推荐）  或者是一个  htmlelement
            data: function () {    // 存放数据的对象   复用则必须选择 使用一个返回对象的函数
                return {
                    name: "张三",
                    age: 18,
                    sex: "男"
                }
            },

        })
        console.log(vm.$el, '$el');  // 获取模板根元素
        console.log(vm.$data, '$data'); //获取data  观察的实例对象
    </script>
</body>

</html>